<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>message</title>
        <!-- 小图标 -->
        <link href="/img/mine.ico" rel="shortcut icon" type="image/x-icon">
        <link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
        <script src="/js/jquery-3.4.0.min.js"></script>
    </head>
    <body>
        <div class="container">
            <!-- style="margin-top: 10px; border: 1px solid #ff9800;" -->
            <div class="offset-2 col-md-8">
                <div class="row back">
                    <h2 class="text-warning">Message</h2>
                    <!-- 使用了thymeleaf, 无法直接使用${name}, 需要用thymelaf的头包起来, 如下-->
                    <span class="welcome">欢迎：<span class="badge badge-info" th:text="${name}"></span></span>
                </div>
                <div class="row info">
                    <a class="form-control" href="/message/index" name="消息首页">消息首页</a>
                    <!-- 阻止a标签的默认行为, 获取token-->
                    <a class="form-control" href="javascript:void(0);" name="添加消息" onclick="toAddMessage()">到添加消息页面</a>
                </div>
                <div class="row" style="margin-top: 10px;">
                    <button class="btn btn-block btn-outline-info" onclick="readmessage(2)">查看id=1的消息</button>
                    <button class="btn btn-block btn-danger" onclick="delmessage(1)">删除id=1的消息</button>
                </div>
            </div>
        </div>
        <style>
            .back {
                background-color: #e7f4ff
            }

            .info {
                font-size: 18px;
                margin-top: 10px;
                text-align: center;
                border: 2px solid lightsalmon;;
            }

            /* 设置水平居中, vertical-align, line-height */
            .welcome {
                vertical-align: middle;
                line-height: 45px;
                font-size: 20px;
                padding-left: 10px;
            }
        </style>
        <script>
            // 到达添加消息页面
            function toAddMessage() {
                // 从localStorage之中获取
                let token = localStorage.getItem("jwt-token")
                $.ajax({
                    url: "/message/add",
                    type: "get",
                    headers: {
                        // accept是表示客户端可以接收的数据类型, Content-Type是此次请求的数据类型, 如果没有参数, 可以不设置
                        "Accept": "application/json; charset=utf-8",
                        "Content-Type": "application/json; charset=utf-8",
                        "jwt-token": token
                    },
                    success: function (result) {
                        console.log(result.data)
                        window.location.href = result.data;
                    },
                    error: function (error) {
                        console.log(error)
                    }
                })
            }

            function readmessage(id) {
                $.ajax({
                    url: "/message/read",
                    // dataType: "json",
                    type: "get",
                    data: {
                        "id": id,
                    },
                    success: function (data) {
                        console.log(data)
                        alert(data)
                    },
                    error: function (error) {
                        console.log(error)
                    }
                })
            }

            function delmessage(id) {
                $.ajax({
                    url: "/message/delete",
                    // dataType: "json",
                    type: "get",
                    data: {
                        'id': id,
                    },
                    success: function (data) {
                        alert("删除成功!")
                    },
                    error: function () {
                    }
                });
            }
        </script>

    </body>
</html>